import { CaseConfigType } from '../../shared/utils/interface';
import { TypeComponent } from './type/type.component';
import { IconButtonComponent } from './icon-button/icon-button.component';
import { SizeComponent } from './size/size.component';
import { DisabledComponent } from './disabled/disabled.component';
import { LoadingComponent } from './loading/loading.component';
import { DangerComponent } from './danger/danger.component';
import { MenuButtonComponent } from './menu-button/menu-button.component';
import { AllButtonComponent } from './all-button/all-button.component';

export const ButtonConfig: CaseConfigType = {
  location: 'Button',
  description: '按钮用于开始一个即时操作。',
  description_en: 'The button is used to start an immediate action.',
  component: [
    {
      demo: TypeComponent,
      codePath: 'showcase/button/type/type.component',
      demoTitle: '按钮类型',
      demoTitle_en: 'Button Type',
      demoDescription: `按钮有4种类型：主按钮、次按钮、文字按钮。单个页面或者容器之中最多只能使用一个主要按钮，用于表达所有按钮中最主要的操作。`,
      demoDescription_en: `There are 4 types of buttons: primary button, secondary button, and text button. Only one main button can be used in a single page or container, and it is used to express the main operation of all buttons.`,
    },
    {
      demo: IconButtonComponent,
      codePath: 'showcase/button/icon-button/icon-button.component',
      demoTitle: '图标按钮',
      demoTitle_en: 'Icon Button',
      demoDescription: `图标按钮最好是能够自表其意，通常为一些约定俗称的操作，或者是在业界约定俗成，对于用户不容易理解或者图标不好表达的操作不推荐用图标按钮。`,
      demoDescription_en: `It is better for the icon button to be able to express its own meaning. It is usually some conventional operation, or it is a convention in the industry. It is not recommended to use icon buttons for operations that are not easy for users to understand or the icons are not easy to express.`,
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/button/size/size.component',
      demoTitle: '按钮尺寸',
      demoTitle_en: 'Size',
      demoDescription: `按钮有大、中两种尺寸。通过设置 size 为 large 把按钮设为大尺寸。若不设置 size，则尺寸为中。`,
      demoDescription_en: `Buttons are available in large and medium sizes. Make the button large by setting size to large. If size is not set, the size is medium.`,
    },
    {
      demo: DisabledComponent,
      codePath: 'showcase/button/disabled/disabled.component',
      demoTitle: '禁用',
      demoTitle_en: 'Disabled',
      demoDescription: `添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。`,
      demoDescription_en: `Adding the disabled attribute makes the button unavailable and the button style changes.`,
    },
    {
      demo: LoadingComponent,
      codePath: 'showcase/button/loading/loading.component',
      demoTitle: '加载中',
      demoTitle_en: 'Loading',
      demoDescription: `点击按钮下发命令后，结果反馈可能会延迟。此时使用按钮加载，例如登录中的状态提示，配置页面保存中的提示。`,
      demoDescription_en: `After the button is issued by the button, the result feedback may be delayed. At this point, use the button to load, for example, the status prompt in the login, and configure the prompt in the page save.`,
    },
    {
      demo: DangerComponent,
      codePath: 'showcase/button/danger/danger.component',
      demoTitle: '破坏性/危险按钮',
      demoTitle_en: 'Destructive/Dangerous Buttons',
      demoDescription: `危险按钮用于可能带来破坏性影响的操作，通过警示性的颜色来提示用户。`,
      demoDescription_en: `Hazard buttons are used for operations that may have destructive effects, and the user is prompted by a warning color.`,
    },
    {
      demo: MenuButtonComponent,
      codePath: 'showcase/button/menu-button/menu-button.component',
      demoTitle: '菜单按钮',
      demoTitle_en: 'Menu Button',
      demoDescription: `如果多个操作属于同一类型，可以考虑使用菜单按钮，特别是在空间比较有限，或者所有相同类型操作的使用频率比较低的场景。`,
      demoDescription_en: `If multiple actions are of the same type, consider using a menu button, especially if space is limited or all actions of the same type are used infrequently.`,
    },
    {
      demo: AllButtonComponent,
      codePath: 'showcase/button/all-button/all-button.component',
      demoTitle: '所有类型按钮',
      devDebug: true,
    },
  ],
  selector: 'lv-button',
  snippet: `<button lv-button lvType="\${1:primary}">\${2:Primary}</button>`,
  api: [
    {
      attribute: 'lvType',
      type: 'primary | link | default',
      default: 'default',
      description: '按钮类型。',
      description_en: 'Button types.',
    },
    {
      attribute: 'lvDanger',
      type: 'boolean',
      default: 'false',
      description: '危险按钮。',
      description_en: 'Danger button.',
    },
    {
      attribute: 'lvSize',
      type: 'large | default | small | auto',
      default: 'default',
      description: '按钮大小, large, default, small 有固定高度和最小宽度, auto 宽度自适应。',
      description_en: `Button size: large, small and default size button have fixed height and minimum width, auto size button width is adaptive.`,
    },
    {
      attribute: 'lvLoading',
      type: 'boolean',
      default: 'false',
      description: '是否显示加载效果。',
      description_en: 'Whether to display loading.',
    },
    {
      attribute: 'lvLoadingText',
      type: 'string',
      default: 'Loading',
      description: '加载时显示的文本。',
      description_en: 'The text to display when loading.',
    },
  ],
};
